```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTTP请求头详解 | 技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Hiragino Sans GB", Simsun, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .header-hover {
            transition: all 0.3s ease;
        }
        .header-hover:hover {
            color: #4f46e5;
        }
        .highlight {
            background: linear-gradient(120deg, #a5b4fc 0%, #a5b4fc 100%);
            background-repeat: no-repeat;
            background-size: 100% 40%;
            background-position: 0 90%;
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4.5rem;
            line-height: 0.65;
            margin: 0.15em 0.1em 0 0;
            font-weight: 700;
            color: #4f46e5;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20">
        <div class="container mx-auto px-6 max-w-5xl">
            <div class="flex flex-col items-center text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-6">HTTP请求头详解</h1>
                <p class="text-xl md:text-2xl opacity-90 max-w-3xl leading-relaxed">
                    探索网络通信的核心组件，了解HTTP请求头如何塑造现代Web体验
                </p>
                <div class="mt-8">
                    <a href="#content" class="inline-block bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300">
                        <i class="fas fa-arrow-down mr-2"></i>开始探索
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main id="content" class="container mx-auto px-6 py-16 max-w-5xl">
        <article class="prose prose-lg max-w-none">
            <div class="drop-cap mb-12">
                <p class="text-gray-700 leading-relaxed">
                    HTTP请求头（HTTP Request Headers）是HTTP请求中的一个重要部分，用于传递关于客户端、请求、数据格式等的信息。它们可以影响服务器如何处理请求以及返回的响应。
                </p>
            </div>

            <!-- Visualization -->
            <div class="my-16 p-6 bg-white rounded-xl shadow-lg">
                <h2 class="text-2xl font-bold mb-6 text-center">HTTP请求结构可视化</h2>
                <div class="mermaid">
                    graph LR
                    A[HTTP请求] --> B[请求行]
                    A --> C[请求头]
                    A --> D[请求体]
                    B --> E["方法 (GET/POST等)"]
                    B --> F["路径 (/resource)"]
                    B --> G["HTTP版本 (HTTP/1.1)"]
                    C --> H["Host: example.com"]
                    C --> I["User-Agent: 浏览器信息"]
                    C --> J["Accept: 接受的内容类型"]
                    C --> K["Cookie: 会话数据"]
                    D --> L["表单数据/JSON/文件等"]
                </div>
            </div>

            <!-- 1. 请求行 -->
            <section class="mb-16">
                <h2 class="text-3xl font-bold mb-6 flex items-center">
                    <span class="bg-indigo-100 text-indigo-800 w-10 h-10 rounded-full flex items-center justify-center mr-4">1</span>
                    <span class="header-hover">请求行</span>
                </h2>
                <div class="grid md:grid-cols-3 gap-6">
                    <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                        <div class="text-indigo-600 mb-3">
                            <i class="fas fa-code text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-xl mb-2">请求方法</h3>
                        <p class="text-gray-600">如 <code class="bg-gray-100 px-2 py-1 rounded">GET</code>、<code class="bg-gray-100 px-2 py-1 rounded">POST</code>、<code class="bg-gray-100 px-2 py-1 rounded">PUT</code>、<code class="bg-gray-100 px-2 py-1 rounded">DELETE</code>等，表示客户端请求的操作类型。</p>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                        <div class="text-indigo-600 mb-3">
                            <i class="fas fa-map-marked-alt text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-xl mb-2">请求路径</h3>
                        <p class="text-gray-600">指定请求的资源路径或URL，如 <code class="bg-gray-100 px-2 py-1 rounded">/api/users</code> 或 <code class="bg-gray-100 px-2 py-1 rounded">/index.html</code>。</p>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                        <div class="text-indigo-600 mb-3">
                            <i class="fas fa-clock text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-xl mb-2">HTTP版本</h3>
                        <p class="text-gray-600">如 <code class="bg-gray-100 px-2 py-1 rounded">HTTP/1.1</code>、<code class="bg-gray-100 px-2 py-1 rounded">HTTP/2</code>等，指示使用的HTTP协议版本。</p>
                    </div>
                </div>
            </section>

            <!-- 2. 常见的请求头字段 -->
            <section class="mb-16">
                <h2 class="text-3xl font-bold mb-6 flex items-center">
                    <span class="bg-indigo-100 text-indigo-800 w-10 h-10 rounded-full flex items-center justify-center mr-4">2</span>
                    <span class="header-hover">常见的请求头字段</span>
                </h2>

                <div class="space-y-8">
                    <!-- Host -->
                    <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                        <h3 class="font-bold text-xl mb-3 flex items-center">
                            <span class="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm">2.1</span>
                            <code class="bg-gray-100 px-2 py-1 rounded">Host</code>
                        </h3>
                        <div class="pl-11">
                            <p class="text-gray-700 mb-3"><span class="font-medium">作用：</span>指定请求目标的服务器域名和端口号。</p>
                            <div class="bg-gray-800 rounded p-4 text-gray-200 overflow-x-auto">
                                <pre class="m-0">Host: www.toString.com</pre>
                            </div>
                        </div>
                    </div>

                    <!-- User-Agent -->
                    <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                        <h3 class="font-bold text-xl mb-3 flex items-center">
                            <span class="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm">2.2</span>
                            <code class="bg-gray-100 px-2 py-1 rounded">User-Agent</code>
                        </h3>
                        <div class="pl-11">
                            <p class="text-gray-700 mb-3"><span class="font-medium">作用：</span>标识发出请求的客户端软件（如浏览器、应用程序）的类型和版本。</p>
                            <div class="bg-gray-800 rounded p-4 text-gray-200 overflow-x-auto">
                                <pre class="m-0">User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36</pre>
                            </div>
                        </div>
                    </div>

                    <!-- Accept -->
                    <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                        <h3 class="font-bold text-xl mb-3 flex items-center">
                            <span class="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm">2.3</span>
                            <code class="bg-gray-100 px-2 py-1 rounded">Accept</code>
                        </h3>
                        <div class="pl-11">
                            <p class="text-gray-700 mb-3"><span class="font-medium">作用：</span>指定客户端能够接受的媒体类型（MIME类型）。</p>
                            <div class="bg-gray-800 rounded p-4 text-gray-200 overflow-x-auto">
                                <pre class="m-0">Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8</pre>
                            </div>
                            <div class="mt-4 bg-blue-50 p-4 rounded-lg">
                                <h4 class="font-medium text-blue-800 mb-2 flex items-center">
                                    <i class="fas fa-info-circle mr-2"></i>知识扩展
                                </h4>
                                <p class="text-blue-700">"q=0.9"表示质量因子，数值在0-1之间，数值越高优先级越高。示例中<code class="bg-blue-100 px-1 py-0.5 rounded">*/*;q=0.8</code>表示接受所有类型，但优先级较低。</p>
                            </div>
                        </div>
                    </div>

                    <!-- Accept-Encoding -->
                    <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                        <h3 class="font-bold text-xl mb-3 flex items-center">
                            <span class="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm">2.4</span>
                            <code class="bg-gray-100 px-2 py-1 rounded">Accept-Encoding</code>
                        </h3>
                        <div class="pl-11">
                            <p class="text-gray-700 mb-3"><span class="font-medium">作用：</span>指示客户端能够理解的内容编码方式，用于内容的压缩或解压缩。</p>
                            <div class="bg-gray-800 rounded p-4 text-gray-200 overflow-x-auto">
                                <pre class="m-0">Accept-Encoding: gzip, deflate, br</pre>
                            </div>
                        </div>
                    </div>

                    <!-- Accept-Language -->
                    <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                        <h3 class="font-bold text-xl mb-3 flex items-center">
                            <span class="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm">2.5</span>
                            <code class="bg-gray-100 px-2 py-1 rounded">Accept-Language</code>
                        </h3>
                        <div class="pl-11">
                            <p class="text-gray-700 mb-3"><span class="font-medium">作用：</span>指定客户端能够接受的语言和地区，用于语言本地化。</p>
                            <div class="bg-gray-800 rounded p-4 text-gray-200 overflow-x-auto">
                                <pre class="m-0">Accept-Language: en-US,en;q=0.9</pre>
                            </div>
                        </div>
                    </div>

                    <!-- Connection -->
                    <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                        <h3 class="font-bold text-xl mb-3 flex items-center">
                            <span class="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm">2.6</span>
                            <code class="bg-gray-100 px-2 py-1 rounded">Connection</code>
                        </h3>
                        <div class="pl-11">
                            <p class="text-gray-700 mb-3"><span class="font-medium">作用：</span>控制连接的管理方式，如保持连接（keep-alive）或关闭连接（close）。</p>
                            <div class="bg-gray-800 rounded p-4 text-gray-200 overflow-x-auto">
                                <pre class="m-0">Connection: keep-alive</pre>
                            </div>
                        </div>
                    </div>

                    <!-- Authorization -->
                    <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                        <h3 class="font-bold text-xl mb-3 flex items-center">
                            <span class="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm">2.7</span>
                            <code class="bg-gray-100 px-2 py-1 rounded">Authorization</code>
                        </h3>
                        <div class="pl-11">
                            <p class="text-gray-700 mb-3"><span class="font-medium">作用：</span>包含用于认证的凭据，如基本认证或令牌。</p>
                            <div class="bg-gray-800 rounded p-4 text-gray-200 overflow-x-auto">
                                <pre class="m-0">Authorization: Basic dXNlcjpwYXNzd29yZA==</pre>
                            </div>
                            <div class="mt-4 bg-yellow-50 p-4 rounded-lg">
                                <h4 class="font-medium text-yellow-800 mb-2 flex items-center">
                                    <i class="fas fa-shield-alt mr-2"></i>安全提示
                                </h4>
                                <p class="text-yellow-700">Basic认证的凭据是Base64编码的，但并未加密。在生产环境中应始终使用HTTPS，并考虑更安全的认证方式如OAuth或JWT。</p>
                            </div>
                        </div>
                    </div>

                    <!-- Cookie -->
                    <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                        <h3 class="font-bold text-xl mb-3 flex items-center">
                            <span class="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm">2.8</span>
                            <code class="bg-gray-100 px-2 py-1 rounded">Cookie</code>
                        </h3>
                        <div class="pl-11">
                            <p class="text-gray-700 mb-3"><span class="font-medium">作用：</span>包含客户端存储的Cookies数据，以便服务器识别用户会话。</p>
                            <div class="bg-gray-800 rounded p-4 text-gray-200 overflow-x-auto">
                                <pre class="m-0">Cookie: sessionId=abc123; userId=789</pre>
                            </div>
                        </div>
                    </div>

                    <!-- Content-Type -->
                    <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                        <h3 class="font-bold text-xl mb-3 flex items-center">
                            <span class="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm">2.9</span>
                            <code class="bg-gray-100 px-2 py-1 rounded">Content-Type</code>
                        </h3>
                        <div class="pl-11">
                            <p class="text-gray-700 mb-3"><span class="font-medium">作用：</span>指定请求体的媒体类型，告诉服务器请求体的格式。</p>
                            <div class="bg-gray-800 rounded p-4 text-gray-200 overflow-x-auto">
                                <pre class="m-0">Content-Type: application/json</pre>
                            </div>
                            <div class="mt-4 grid md:grid-cols-2 gap-4">
                                <div class="bg-gray-100 p-3 rounded">
                                    <h4 class="font-medium mb-2">常见MIME类型</h4>
                                    <ul class="text-sm space-y-1">
                                        <li><code>text/html</code> - HTML文档</li>
                                        <li><code>application/json</code> - JSON数据</li>
                                        <li><code>application/xml</code> - XML数据</li>
                                        <li><code>multipart/form-data</code> - 文件上传</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Content-Length -->
                    <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                        <h3 class="font-bold text-xl mb-3 flex items-center">
                            <span class="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm">2.10</span>
                            <code class="bg-gray-100 px-2 py-1 rounded">Content-Length</code>
                        </h3>
                        <div class="pl-11">
                            <p class="text-gray-700 mb-3"><span class="font-medium">作用：</span>指定请求体的长度（字节数），用于告知服务器请求体的大小。</p>
                            <div class="bg-gray-800 rounded p-4 text-gray-200 overflow-x-auto">
                                <pre class="m-0">Content-Length: 348</pre>
                            </div>
                        </div>
                    </div>

                    <!-- Referer -->
                    <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                        <h3 class="font-bold text-xl mb-3 flex items-center">
                            <span class="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm">2.11</span>
                            <code class="bg-gray-100 px-2 py-1 rounded">Referer</code>
                        </h3>
                        <div class="pl-11">
                            <p class="text-gray-700 mb-3"><span class="font-medium">作用：</span>提供请求来源页面的URL，用于追踪和分析。</p>
                            <div class="bg-gray-800 rounded p-4 text-gray-200 overflow-x-auto">
                                <pre class="m-0">Referer: https://www.example.com/page</pre>
                            </div>
                        </div>
                    </div>

                    <!-- X-Requested-With -->
                    <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                        <h3 class="font-bold text-xl mb-3 flex items-center">
                            <span class="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm">2.12</span>
                            <code class="bg-gray-100 px-2 py-1 rounded">X-Requested-With</code>
                        </h3>
                        <div class="pl-11">
                            <p class="text-gray-700 mb-3"><span class="font-medium">作用：</span>用于标识异步请求（如AJAX请求）。</p>
                            <div class="bg-gray-800 rounded p-4 text-gray-200 overflow-x-auto">
                                <pre class="m-0">X-Requested-With: XMLHttpRequest</pre>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 3. 特殊请求头 -->
            <section class="mb-16">
                <h2 class="text-3xl font-bold mb-6 flex items-center">
                    <span class="bg-indigo-100 text-indigo-800 w-10 h-10 rounded-full flex items-center justify-center mr-4">3</span>
                    <span class="header-hover">特殊请求头</span>
                </h2>

                <div class="space-y-8">
                    <!-- Range -->
                    <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                        <h3 class="font-bold text-xl mb-3 flex items-center">
                            <span class="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm">3.1</span>
                            <code class="bg-gray-100 px-2 py-1 rounded">Range</code>
                        </h3>
                        <div class="pl-11">
                            <p class="text-gray-700 mb-3"><span class="font-medium">作用：</span>用于请求部分资源的特定范围（常用于大文件下载和分段请求）。</p>
                            <div class="bg-gray-800 rounded p-4 text-gray-200 overflow-x-auto">
                                <pre class="m-0">Range: bytes=200-1000</pre>
                            </div>
                            <div class="mt-4 bg-green-50 p-4 rounded-lg">
                                <h4 class="font-medium text-green-800 mb-2 flex items-center">
                                    <i class="fas fa-lightbulb mr-2"></i>实际应用
                                </h4>
                                <p class="text-green-700">视频网站常用此功能实现视频的断点续传和分段加载，提升用户体验。</p>
                            </div>
                        </div>
                    </div>

                    <!-- If-Modified-Since -->
                    <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                        <h3 class="font-bold text-xl mb-3 flex items-center">
                            <span class="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm">3.2</span>
                            <code class="bg-gray-100 px-2 py-1 rounded">If-Modified-Since</code>
                        </h3>
                        <div class="pl-11">
                            <p class="text-gray-700 mb-3"><span class="font-medium">作用：</span>用于缓存机制，指定请求的资源是否在指定时间之后被修改过。</p>
                            <div class="bg-gray-800 rounded p-4 text-gray-200 overflow-x-auto">
                                <pre class="m-0">If-Modified-Since: Wed, 21 Jul 2021 07:28:00 GMT</pre>
                            </div>
                            <div class="mt-4 bg-purple-50 p-4 rounded-lg">
                                <h4 class="font-medium text-purple-800 mb-2 flex items-center">
                                    <i class="fas fa-database mr-2"></i>缓存机制
                                </h4>
                                <p class="text-purple-700">如果资源未被修改，服务器会返回304 Not Modified状态码，减少数据传输。</p>
                            </div>
                        </div>
                    </div>

                    <!-- If-None-Match -->
                    <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                        <h3 class="font-bold text-xl mb-3 flex items-center">
                            <span class="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm">3.3</span>
                            <code class="bg-gray-100 px-2 py-1 rounded">If-None-Match</code>
                        </h3>
                        <div class="pl-11">
                            <p class="text-gray-700 mb-3"><span class="font-medium">作用：</span>用于缓存机制，指定请求的资源是否与给定的ETag匹配，以决定是否返回更新的数据。</p>
                            <div class="bg-gray-800 rounded p-4 text-gray-200 overflow-x-auto">
                                <pre class="m-0">If-None-Match: "5d8c72a7-1d8"</pre>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Summary -->
            <section class="bg-indigo-50 p-8 rounded-xl">
                <h2 class="text-2xl font-bold mb-4 text-indigo-800 flex items-center">
                    <i class="fas fa-star mr-3"></i>核心要点总结
                </h2>
                <ul class="space-y-3 text-indigo-700">
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
                        <span>HTTP请求头是客户端与服务器通信的关键媒介，传递请求的元数据</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
                        <span><code>Host</code>、<code>User-Agent</code>、<code>Accept</code>等是每个请求几乎都会包含的基础头</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
                        <span><code>Authorization</code>、<code>Cookie</code>等头用于身份验证和会话管理</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
                        <span><code>Range</code>、<code>If-Modified-Since</code>等头提供高级功能，优化性能</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
                        <span>理解请求头有助于调试网络问题、优化性能和提高安全性</span>
                    </li>
                </ul>
            </section>
        </article>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12">
        <div class="container mx-auto px-6 max-w-5xl text-center">
            <div class="mb-4">
                <h3 class="text-xl font-medium text-white">技术小馆</h3>
            </div>
            <div class="mb-6">
                <a href="http://www.yuque.com/jtostring" class="text-indigo-400 hover:text-indigo-300 transition duration-300 inline-block">
                    <i class="fas fa-external-link-alt mr-2"></i>访问技术小馆语雀
                </a>
            </div>
            <div class="text-sm">
                <p>© 2023 技术小馆. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        // 初始化Mermaid图表
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```